{% load filter %}
<ul class="media-list">
    {% if history_records %}
        {% for history_record in history_records %}
            <li class="media" style="margin-bottom: 40px">
                <div class="media-left">
                    <a href="{% url 'videoPlayer' history_record.courses_id|getCourseUrl history_record.courses_id history_record.courses_id|getCourseVideoId %}">
                        <img style="height: 100px; width: 160px;border-radius: 5px" class="media-object"
                             src="{{ history_record.courses_id|getCourseImgUrl }}">
                    </a>
                </div>
                <div class="media-body" style="position: relative; border-bottom: 1px solid grey;">
                    <a href="{% url 'videoPlayer' history_record.courses_id|getCourseUrl history_record.courses_id history_record.courses_id|getCourseVideoId %}">
                        <h3 class="video_name_history">{{ history_record.courses_id|getCourseVideoName }}</h3></a>
                    <h5>
                        <p style="position: absolute; bottom: 0; color: grey">{{ history_record.courses_id|getCourseName }}</p>
                    </h5>
                </div>
                <div class="media-right" style=" border-bottom: 1px solid grey; width: 1000px">
                    <a href="javascript:;" class="center-block" style="margin-top: 20px"><img
                            onclick="clearOne({{ history_record.courses_id }})" style="margin-left: 50px;width: 20px;"
                            src="/static/image/delete_history.png"></a>
                    <h5 style="margin-top: 30px; color: grey">{{ history_record.play_time|date:"Y-m-d H:i:s" }}</h5>
                </div>
            </li>
        {% endfor %}
    {% else %}
        <div style="width: 100%; height: 400px;display: flex;
			align-items: center;
			justify-content: center;">
            <img style="height: 200px;" src="/static/image/logo.png">
            <div class="alert alert-info" role="alert">
                来也空空，去也匆匆
                <a href="{% url 'courses' 'firstGrade' 'allCourses' 1 %}" class="alert-link">点我立即学习^_^！</a>
            </div>
        </div>
    {% endif %}
    {% csrf_token %}
</ul>
<script>

</script>